<template>
  <div id="app">
    <header id="header" class="auto-rem mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">
        {{name}}
      </h1>
    </header>
    <div class="mui-content">
      <div class="mui-scroll-wrapper" @dragend="dragPanel">
        <div class="default-content floor">
          <tmall-product-item :products="products" @selectProduct="openSelectPanel"></tmall-product-item>
        </div>
      </div>
      <div class="back-top" @tap="scrollTop">
        <span class="mui-icon-extra mui-icon-extra-top"></span>
      </div>
    </div>
    <select-panel :product="selectproduct"></select-panel>
    <search-panel :hots="hots"></search-panel>
  </div>
</template>

<script>

import { ajax, userSettings, apiDomain } from 'assets/js/Lib'

import SelectPanel from 'components/SelectPanel'
import SearchPanel from 'components/SearchPanel'
import TmallFastNav from 'components/TmallFastNav'
import TmallMuiSlider from 'components/TmallMuiSlider'
import TmallProductItem from 'components/TmallProductItem'

export default {
  data() {
    return {
      name: '',
      slides: [],
      buttons: [],
      selectproduct: {},
      products: [],
      category_id: null,
      is_score: 0,
      page: 0,
      hots: [],
    }
  },
  components: {
    TmallMuiSlider, TmallProductItem, TmallFastNav, SearchPanel, SelectPanel,
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate() {

  },
  //在挂载开始之前被调用
  beforeMount() {
  },
  //已成功挂载，相当ready()
  mounted() {
    const vm = this;
    let params = url('?');
    this.category_id = params.category_id;
    this.name = params.category_name;
    this.is_score = params.is_score ? params.is_score : this.is_score;

    mui.init({
      swipeBack: true,
      statusBarBackground: '#f7f7f7',
      pullRefresh : {
        container: '.mui-scroll-wrapper',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        up : {
          height:50,//可选.默认50.触发上拉加载拖动距离
          auto:true,//可选,默认false.自动上拉加载一次
          contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
          callback : function() {
            vm.requestCategoryProducts(++vm.page, (res) => {
              console.log('res', res);
              vm.products = vm.products.concat(res.product);
              this.endPullupToRefresh(false);
            });
          }
        }
      }
    })

//    this.requestCategoryProducts(++this.page, (res) => {
//      vm.products = vm.products.concat(res.product);
//    });

//    ajax({
//      url: '/api/public/hotserach',
//      data: { pageNum: 20 },
//      type: 'GET',
//      success: (res) => {
//        vm.hots = res.product_category
//      }
//    });

    ajax({
      url: '/api/category/single',
      data: { category_id: this.category_id },
      type: 'GET',
      success: (res) => {
        this.name = res.name;
      }
    })
  },
  //相关操作事件
  methods: {
    openCategory: function () {
      this.categoryshow = true
    },
    openSearch: function () {
      mui('.slg-search').popover('show')
    },
    scrollTop: function (e) {
      mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 200)
      document.querySelector('.back-top').style.display = 'none'
    },
    requestCategoryProducts(page, onSuccess) {
      ajax({
        url: `/api/product/index?menu_id=${this.category_id}&page=${page}`,
        type: 'GET',
        dataType: 'json',
        success: onSuccess
      });
    },
    dragPanel: function (e) {
      const backTop = document.querySelector('.back-top')
      const translateY = Math.abs(/translate(Y|\dd)?\(\s*(\w+\s*,)?\s*([^,]+)(\s*,[^)]+)?\s*\)/.exec(document.querySelector('#app .mui-scroll').style.transform)[3].slice(0, -2))
      if (translateY > document.querySelector('.mui-scroll-wrapper').getBoundingClientRect().bottom) {
          backTop.style.display = 'block'
      } else {
          backTop.style.display = 'none'
      }
    },
    openSelectPanel: function (index) {
      const product = this.products[index]
      let obj = {
        id: product.id,
        imgurl: apiDomain + '/public/uploads/' + product.file.savepath + product.file.savename,
        price: product.price
      }
      this.selectproduct = obj
    }
  }
}
</script>

<style lang="less">
#app {

  .tmall-header~.mui-content .mui-scroll-wrapper {
    padding-top: 1.2rem;
  }

  .default-content {
    background-color: #fff;
    padding: 0.4083333333333333rem;
    margin: 0;
    &.slides {
      padding: 25px;

      @media (max-width: 320px) {
        padding: 20px;
      }
    }
    &.floor {
      margin-top: 0.3333333333333333rem;
      padding-top: 0;
    }
  }
  .mui-card {
    margin: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .mui-card-content-inner {
    padding: 0;
  }
}

.tmall-header {
  width: 100%;
  position: fixed;
  background: #FF0036;
  z-index: 5;
  .search-input {
    width: 8.4rem;
    height: .9333333333rem;
    margin: .1333333333rem;
    margin-left: .2333333333rem;
    line-height: 1.0333333333rem;
    transition: width .2s;
    background-color: #fff;
    .category-menu {
      height: .8rem;
      width: .8rem;
      text-indent: -1000em;
      background-size: 7.52rem .8266666667rem;
      position: absolute;
      top: .124933333rem;
      margin-top: .0533333333rem;
      right: .25rem;
      opacity: .7;
    }
    .search-input-img {
      width: .4rem;
      height: .4266666667rem;
      float: left;
      margin: .2666666667rem 0 0 .2666666667rem;
      background-color: inherit;
      opacity: .3;
    }
    .search-input-text {
      font-size: .3733333333rem;
      padding: 0 0 0 .8rem;
      vertical-align: text-top;
      opacity: .3;
      letter-spacing: 0;
    }
  }
}

.back-top {
  display: none;
  line-height: 0;
  padding: .2rem;
  position: fixed;
  right: .4rem;
  bottom: .8rem;
  z-index: 3;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50px;
  .mui-icon-extra-top {
    opacity: .5;
    font: .75rem;
  }
}
</style>
